<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .mycolor {
            color: red;
        }
    </style>
</head>

<body>

    <div id="div1"></div>
    <div id="div2"></div>
    <div id="div3" class="mycolor">
    </div>
    <div id="div4">
        <p id="p1">p1</p>
    </div>
    <span id="span1"></span>
    <ul>
        <li>apple</li>
        <li>banana</li>
        <li>orange</li>
    </ul>

    <script>
        let div1 = document.getElementById("div1")
        console.log(div1)
        div1.innerHTML = "<p>342</p>"
        div1.title = "xxxxxx"
        div1.style.color = "red"

        let myEle = document.createElement("h1")
        myEle.innerText = "这是h1"
        let myEle1 = document.createElement("div")
        myEle1.innerText = "1243"
        div1.append(myEle, myEle1)
        div1.append("324123")

        let div2 = document.querySelector("#div2")
        console.log(div2)
        let div3 = document.querySelector(".mycolor")
        console.log(div3)
        let div4 = document.getElementsByTagName("div")
        console.log(div4)

        let p1 = document.getElementById("p1")
        let myEle2 = document.createElement("h3")
        myEle2.innerHTML = "这是myEle2"
            // div1.insertBefore(myEle2, p1)
        p1.before(myEle2)
        let myEle3 = document.createElement("h4")
        myEle3.innerHTML = "这是h4"
        p1.after(myEle3)

        let span1 = document.getElementById("span1")
        span1.remove()

        let list = document.getElementsByTagName("ul")
        console.log(list)
            // for (item of list[0].children) {
            //     item.innerHTML = "pear"
            // }
        console.log(list[0].firstElementChild.nextElementSibling)
        console.log(list[0].children[1])
        console.log(p1.parentElement)

        p1.parentElement.removeChild(p1)
            // div3.removeChild(p1)

        list[0].removeChild(list[0].firstElementChild)
    </script>
</body>

</html>